<template>
    <div class="my-card  " >
        <div class="list plr15 pt12">
            <div class="item bgc-fff pl18 pt13 pb18 bgc-fff mb12" v-for="(item, i) in list" :key="i" >
                <div class="kitbox">
                    <div class=""><img class="img" :src="item.suit.cover" alt=""></div>
                    <div class="flex1 pl10">
                        <div class="c-000 fs-13 pt10">{{item.suit.name}}</div>
                        <div class="c-c9994a fs-12 pt6">
                            <span>已使用{{item.use_count}}次</span>
                            <span class="ml15">未使用{{item.active_count}}次</span>
                        </div>
                        <div class="fs-11 pt6 c-9a9a9a">
                            有效日期:<span class="">{{item.start_date}}至{{item.end_date}}</span>
                        </div>
                    </div>
                </div>
                <div class="kitbox fs-12 pt15">
                    <div class="flex1 tc">
                        <div @click="link('/personal/cardUse?cardId='+ item.cardId)" class="btn primiry">使用记录</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import cardApi from "@/api/api-card";
export default {
    name: "orderDetail",
    components: {

    },
    data(){
        return {
            list: []
        }
    },
    onLoad(option){   
        
    },
    mounted() {
        this.ListCard()
    },
    methods: {
        ListCard(){
            cardApi.ListCard({
                pageIndex: 1,
                pageSize: 999
            }).then(res => {
                res = res.result
                this.list = res.List || []
            })
        },
    }
};
</script>
<style lang="scss" scope>
@import '../vip/css/index.scss';
</style>
